<template>
  <div class="page">
    <el-tabs v-model="activeTabName" @tab-click="onChangeTabPane">
      <el-tab-pane label="基本信息" name="basic">
        <el-form :model="basicFormData" label-width="100px">
          <el-form-item label="案件类型">
            <el-radio-group v-model="basicFormData.case_type">
              <el-radio label="1">刑事案件</el-radio>
              <el-radio label="2">行政案件</el-radio>
              <el-radio label="3">其它</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="案件编号">
            <el-input v-model="basicFormData.case_no" />
          </el-form-item>
          <el-form-item label="案件名称">
            <el-input v-model="basicFormData.case_name" />
          </el-form-item>

          <div v-for="item in basicFormData.case_police" :key="item.id" class="elem-form-h">
            <el-form-item style="width:33%" label="办案民警">
              <el-input v-model="item.name" />
            </el-form-item>
            <el-form-item style="width:33%" label="警号">
              <el-input v-model="item.no" />
            </el-form-item>
            <el-form-item style="width:33%" label="联系方式">
              <el-input v-model="item.tel" />
            </el-form-item>
          </div>

          <el-form-item label="简要案情">
            <el-input v-model="basicFormData.case_desc" type="textarea" :rows="5" maxlength="200" show-word-limit />
          </el-form-item>
          <el-form-item label="受、立案文书">
            <FileUpload v-model="basicFormData.case_paper" tip="受、立案文书" />
          </el-form-item>
          <el-form-item>
            <div class="action-btns">
              <el-button class="process-btn" type="primary" size="mini" @click="goNext">下一步</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="要素信息" name="element">
        <div class="elem-templ">
          <el-button type="info" size="mini">导入模版</el-button>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addPerson">增加人员</el-button>
        </div>

        <el-form :model="elementFormData" label-width="100px">
          <div class="elem">
            <div class="elem-form">
              <div v-for="(item, index) in elementFormData.persons" :key="item.id" class="elem-form-h">
                <el-form-item label-width="20px">
                  <el-button type="danger" plain icon="el-icon-delete" size="mini" circle @click="delPerson(index)" />
                </el-form-item>

                <el-form-item style="width:33%" label="姓名">
                  <el-input v-model="item.name" />
                </el-form-item>

                <div class="elem-form-hr">
                  <div class="elem-form-hr-s">
                    <el-form-item label="证件类型">
                      <el-select v-model="item.cardType" placeholder="请选择">
                        <el-option v-for="opt in typeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="证件号">
                      <el-input v-model="item.cardNo" />
                    </el-form-item>
                    <el-form-item label-width="50px">
                      <el-button icon="el-icon-plus" size="mini" circle @click="addOtherInfo(item)" />
                    </el-form-item>
                  </div>

                  <div v-for="(cItem, cIndex) in item.other" :key="cIndex" class="elem-form-hr-d">
                    <el-form-item label="要素类型">
                      <el-select v-model="cItem.type" placeholder="请选择">
                        <el-option v-for="opt in elemOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="要素值">
                      <el-input v-model="cItem.info" />
                    </el-form-item>
                    <el-form-item label-width="20px">
                      <el-button type="danger" plain icon="el-icon-delete" size="mini" circle
                        @click="delOtherInfo(item.other, cIndex)" />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <el-form-item>
            <div class="action-btns">
              <el-button type="primary" size="mini" @click="goPrev">上一步</el-button>
              <el-button type="primary" size="mini" @click="goNext">下一步</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="线索信息" name="clue">
        <el-form :model="clueFormData" label-width="120px">
          <el-form-item label="线索来源情况">
            <el-input v-model="clueFormData.desc" type="textarea" :rows="6" maxlength="200" show-word-limit />
          </el-form-item>
          <el-form-item label="线索来源文书">
            <div class="clue-upload">
              <FileUpload v-model="clueFormData.paper" />
              <el-button type="info" size="mini" @click="downloadTempl">下载线索来源模版</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="action-btns">
              <el-button type="primary" size="mini" @click="goPrev">上一步</el-button>
              <el-button type="primary" size="mini" @click="submitForm">提交审批</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTabName: 'basic',
      basicFormData: {
        case_type: '1',
        case_no: '',
        case_name: '',
        case_desc: '',
        case_paper: '',
        case_police: [
          { id: 1, name: '', no: '', tel: '' },
          { id: 2, name: '', no: '', tel: '' }
        ]
      },
      elementFormData: {
        persons: [
          { id: 1, name: '', cardType: '1', cardNo: '', other: [] }
        ]
      },
      clueFormData: {
        desc: '',
        paper: ''
      },
      typeOptions: [
        { value: '1', label: '身份证' },
        { value: '2', label: '护照' }
      ],
      elemOptions: [
        { value: '1', label: '微信' },
        { value: '2', label: '手机号' }
      ]
    }
  },
  created() {
    this.activeTabIndex = 0
  },
  mounted() {
    console.log('$store.state: ', this.$store.state.case)
    console.log('route query: ', this.$route.query)
  },
  methods: {
    onChangeTabPane(tab, event) {
      // console.log('onChangeTabPane: ', tab)
      this.activeTabIndex = +tab.index
      this.activeTabName = tab.name
    },
    addPolice() {
      this.basicFormData.case_police.push({ id: this.basicFormData.case_police.length + 1, name: '', no: '', tel: '' })
    },
    addOtherInfo(ele) {
      ele.other.push({ type: '', info: '' })
    },
    delOtherInfo(other, index) {
      other.splice(index, 1)
    },
    addPerson() {
      this.elementFormData.persons.push({ id: this.elementFormData.persons.length + 1, name: '', cardType: '', cardNo: '', other: [] })
    },
    delPerson(index) {
      this.elementFormData.persons.splice(index, 1)
    },
    downloadTempl() {
      // Implement your logic to download the template
    },
    goPrev() {
      const tabs = ['basic', 'element', 'clue']
      const prevIndex = this.activeTabIndex - 1
      if (prevIndex >= 0) {
        this.activeTabIndex = prevIndex
        this.activeTabName = tabs[prevIndex]
      }
    },
    goNext() {
      const tabs = ['basic', 'element', 'clue']
      const nextIndex = this.activeTabIndex + 1
      if (nextIndex <= 2) {
        this.activeTabIndex = nextIndex
        this.activeTabName = tabs[nextIndex]
      }
      if (nextIndex === 1) {
        this.$store.dispatch('case/setBasicFormData', this.basicFormData)
      } else if (nextIndex == 2) {
        this.$store.dispatch('case/setElementFormData', this.elementFormData)
        // this.$store.dispatch('case/setClueFormData', this.clueFormData)
      }
    },
    submitForm() {
      this.$router.push({ path: '/case/result', query: { type: '1', approved: 1 } })
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      //     console.log('Form submitted')
      //   } else {
      //     console.log('Form validation failed')
      //   }
      // })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.elem {
  display: flex;

  &-form {
    flex: 1;
    width: 100%;

    &-h {
      width: 100%;
      display: flex;
      align-items: center;

      .elem-form-hr {
        flex: 1;

        &-s,
        &-d {
          display: flex;
          align-items: center;
        }

        &-d {
          margin-top: 20px;
        }
      }
    }
  }
}

.elem-templ {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

.clue-upload {
  display: flex;

  .el-button {
    height: 28px;
  }
}

.action-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0 0;
}
</style>
